import React, { FC, useEffect } from "react"
import { Checkbox, Form, Input } from "antd"
import { QuestionParagraphPropsType } from "./interface"

const { TextArea } = Input

const PropComponent: FC<QuestionParagraphPropsType> = (props: QuestionParagraphPropsType) => {
    const { text, isCenter, onChange, disabled } = props
    const [form] = Form.useForm()

    useEffect(() => {
        form.setFieldsValue({ text, isCenter })
    }, [text, isCenter])

    function handleValuesChange() {
        if (onChange) {
            // 调用父组件的方法
            onChange(form.getFieldsValue())
        }
    }

    return (
        <Form layout="vertical" initialValues={{ text, isCenter }} onValuesChange={handleValuesChange} form={form} disabled={disabled}>
            <Form.Item label="段落内容" name="text" rules={[{ required: true, message: "请输入段落内容" }]}>
                <TextArea />
            </Form.Item>
            <Form.Item name="isCenter" valuePropName="checked">
                <Checkbox>居中显示</Checkbox>
            </Form.Item>
        </Form>
    )
}

export default PropComponent
